<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单-维多购物平台</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <link href="./bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/index.js" type="module" defer="defer"></script>
    <script src="./js/cookie.js"></script>
    <style>
        header {
            background-color: rgba(0,0,0,.7);;
            backdrop-filter: blur(20px);
        }

        main {
            padding: 10px;
        }

        .order-body {
            width: 100%;
            margin: 60px 0 50px 0;
            max-width: 1200px;
        }

        .order-content {
            width: 100%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background-color: var(--color-background);
            border-radius: 3px;
            margin-bottom: 40px;
            max-width: 1200px;
            gap: 5px;
        }

        .order-content ul {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .order-content li {
            border: 2px solid var(--ui-colors-neutral8);
            background-color: var(--ui-colors-neutral3);
            border-radius: 3px;
            padding: 0 10px;
        }

        .order-content li.nopay {
            border: 2px solid var(--ui-colors-warning8);
            background-color: var(--ui-colors-warning3);
        }

        .order-content li.noreceive {
            border: 2px solid var(--ui-colors-info8);
            background-color: var(--ui-colors-info3);
        }

        .order-content li.noevaluat {
            border: 2px solid var(--ui-colors-success8);
            background-color: var(--ui-colors-success3);
        }

        .list-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid var(--ui-colors-neutral5);
        }

        .list-content,
        .list-content .info {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .list-content {
            justify-content: space-between;
        }

        .list-content img {
            width: 100px;
            height: 100px;
        }

        h2 {
            font-size: 25px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        h4 {
            font-size: 16px;
            font-weight: 600;
        }

        .order-content h4 {
            color: var(--ui-colors-orange);
        }

        .modal-body {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .modal-content {
            background-color: var(--color-background-soft);
            padding: 0 10px 10px 10px;
            width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
        }

        .modal-content .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid var(--ui-colors-neutral5);
        }

        .modal-content .content {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
        }

        .modal-content .content span {
            color: var(--ui-colors-orange);
        }

        .modal-content input {
            width: 270px;
            font-size: 14px;
            line-height: 1.5rem;
            min-height: 35px;
            border-radius: 5px;
            padding-inline-start: 10px;
            padding-inline-end: 10px;
            border: 2px solid var(--color-none);
            background-color: var(--ui-colors-neutral3);
            color: var(--color-text);
        }

        .modal-content input:hover {
            background-color: var(--ui-colors-neutral4);
        }

        .modal-content input:focus {
            outline: none;
            border: 2px solid var(--ui-colors-orange);
        }

        .modal-btn-close {
            background-color: var(--color-none);
            border: none;
            font-size: 30px;
        }

        .modal-content .operate {
            display: flex;
            justify-content: flex-end;
            column-gap: 10px;
        }

        .modal-content .operate .btn-primary {
            background-color: var(--ui-colors-orange);
        }

        .modal-content button:focus {
            display: none;
        }

        .mini-menu {
            position: fixed;
            right: 20px;
            bottom: 50px;
            background-color: rgba(0,0,0,.7);;
            backdrop-filter: blur(20px);
            display: flex;
            padding: 10px;
            gap: 10px;
            flex-direction: column;
            border-radius: 3px;
        }

        .order-content li a, li button {
            width: 100px;
            height: 30px;
            background-color: var(--ui-colors-orange);
            border-radius: 3px;
            color: var(--color-background);
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .order-content li a:hover {
            color: var(--color-background);
        }

        .mini-menu a {
            color: var(--color-background);
        }

        .mini-menu a:hover {
            color: var(--ui-colors-orange);
        }
    </style>
</head>

<body>
    <header id="header" class="has-user">
        <div class="logo">
            <img src="./images/logo.png" alt="logo">
        </div>
        <nav class="main-menu">
            <a href="/">首页</a>
            <a href="/allphone">手机</a>
            <a href="/allcomputer">电脑</a>
        </nav>
        <div class="user-info">
            <div class="user-operate">
                <div class="user-one">
                    <div class="user-name">
                        <span id="username"></span>
                        <svg t="1687403727017" class="icon-user" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="872" width="15" height="15"><path d="M468.7872 738.5088c0-10.4448 4.096-20.8896 12.0832-28.8768L929.792 260.7104c15.9744-15.9744 41.984-15.9744 57.9584 0 7.9872 7.9872 12.0832 18.432 12.0832 28.8768s-4.096 20.8896-12.0832 28.8768L538.624 767.3856c-15.9744 15.9744-41.984 15.9744-57.9584 0-7.9872-7.9872-11.8784-18.432-11.8784-28.8768z" p-id="873"></path><path d="M30.3104 260.9152c7.9872-7.9872 18.432-12.0832 28.8768-12.0832s20.8896 4.096 28.8768 12.0832l448.9216 448.9216c15.9744 15.9744 15.9744 41.984 0 57.9584-7.9872 7.9872-18.432 12.0832-28.8768 12.0832s-20.8896-4.096-29.0816-12.0832L30.3104 318.6688c-15.9744-15.9744-15.9744-41.7792 0-57.7536z" p-id="874"></path></svg>
                    </div>
                    <div class="user-links">
                        <ul>
                            <li><a href="/user"  target="_blank">个人中心</a></li>
                            <li><a href="/wallet"  target="_blank">我的钱包</a></li>
                            <li><a href="/order"  target="_blank">我的订单</a></li>
                            <li><a href="/uevaluate"  target="_blank">评论晒单</a></li>
                            <li><a href="/" onclick="ClearCookie()">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <a href="/trolley" class="mini-shopping-cart">购物车(<span id="count-trolley">0</span>)</a>
        </div>
    </header>
    <main class="order">
        <div class="mini-menu">
            <a href="#list-nopay">待支付</a>
            <a href="#list-noreceive">待收货</a>
            <a href="#list-noevaluate">待评价</a>
            <a href="#list-done">已完成</a>
        </div>
        <div class="order-body">
            <div class="order-header">
                <h2>我的订单</h2>
            </div>
            <div class="order-content">
                <div id="list-nopay">
                    <h2>待支付</h2>
                    <ul id="order-list-nopay">
                    </ul>
                </div>
                <div id="list-noreceive">
                    <h2>待收货</h2>
                    <ul id="order-list-noreceive"></ul>
                </div>
                <div id="list-noevaluate">
                    <h2>待评价</h2>
                    <ul id="order-list-noevaluate"></ul>
                </div>
                <div id="list-done">
                    <h2>已完成</h2>
                    <ul id="order-list-done"></ul>
                </div>
            </div>
        </div>
    </main>
    <div class="modal fade" id="evaluate" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-body">
            <div class="modal-content">
                <div class="title">
                    <h4 id="myModalLabel">发布评价</h4>
                    <button class="modal-btn-close" type="button" data-dismiss="modal"   aria-hidden="true">&times;</button>
                </div>
                <div class="content">
                    <input type="text" placeholder="请输入评价" id="input-evaluate">
                </div>
                <div class="operate">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="btn-pay" onclick="sendEvaluate()">发布</button>
                </div>
            </div><!--   /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="bottom">
        <div class="footer-links clearfix">
            <dl class="col-links col-links-first">
                <dt></dt>
            </dl>
            <dl class="col-links ">
                <dt>选购指南</dt>
                <dd><a rel="nofollow" href="/allphone">手机</a></dd>
                <dd><a rel="nofollow" href="/allcomputer">电脑</a></dd>
            </dl>

            <dl class="col-links ">
                <dt>服务中心</dt>
                <dd><a rel="nofollow" onclick="openChat()" style="cursor: pointer">智能客服</a></dd>
                <dd><a rel="nofollow" href="/order" target="_blank">订单查询</a></dd>
            </dl>

            <dl class="col-links ">
                <dt>关于</dt>
                <dd><a rel="nofollow" href="https://sugarscat.com" target="_blank">了解我们</a></dd>
            </dl>
        </div>
        <div class="site-info">
            <div class="logo ir"></div>
            <div class="info-text">
                <p class="sites">
                    <a rel="nofollow" href="/" target="_blank">维多购物平台</a>
                    <span class="sep">|</span>
                    <a rel="nofollow" href="/privacy" target="_blank"
                    >隐私政策</a
                    >
                </p>
                <p class="sites">
                    <a rel="nofollow" href="http://www.cca.org.cn/" target="_blank"
                    >中国消费者协会</a
                    >
                    <span class="sep">|</span>
                    <a rel="nofollow" href="http://www.bj315.org/" target="_blank"
                    >北京市消费者协会</a
                    >
                </p>
                <p>
                    &copy;2023-至今 版权所有 维多购物平台
                    <br />
                    本网站所列数据、图片，均来自互联网已公开信息，仅供交流学习！
                </p>
            </div>
        </div>
    </div>
</body>
<script src="./js/message.js"></script>
<script src="./js/chat.js"></script>
<script>
    let uid = GetCookie("id")
    let token = GetCookie("token")
    document.getElementById("username").innerText = GetCookie("user")
    const nopay = document.getElementById("list-nopay")
    const noreceive = document.getElementById("list-noreceive")
    const noevaluate = document.getElementById("list-noevaluate")
    const done = document.getElementById("list-done")
    if (token.length>0) {
        $.ajax({
            url:"/api/order",
            method:"post",
            data:{
                uid: uid,
                token: token
            },
            success(res){
                if(res.code===1001) {
                    let data = res.data
                    let nopayHtml = ""
                    let noreceiveHtml = ""
                    let noevaluateHtml = ""
                    let doneHtml = ""
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].situation === "未支付") {
                            nopayHtml += `<li class="nopay">
                                <div class="list-head">
                                <span>订单号：`+ data[i].oid + `</span>
                                <h4>`+ data[i].pprice + `元</h4>
                            </div>
                            <div class="list-content">
                                <div class = "info">
                                    <img src="./images/`+ data[i].pclass +`/`+ data[i].pname + `.webp" alt="`+ data[i].pname +`">
                                    <h5>`+ data[i].pname + " " + data[i].pversion + " " + data[i].pcolor +`</h5>
                                </div>
                                <a href="/pay">去支付</a>
                            </div></li>`
                        } else if (data[i].situation === "待收货") {
                            noreceiveHtml += `<li class="noreceive">
                                <div class="list-head">
                                <span>订单号：`+ data[i].oid + `</span>
                                <h4>`+ data[i].pprice + `元</h4>
                            </div>
                            <div class="list-content">
                                <div class = "info">
                                    <img src="./images/`+ data[i].pclass +`/`+ data[i].pname + `.webp" alt="`+ data[i].pname +`">
                                    <h5>`+ data[i].pname + " " + data[i].pversion + " " + data[i].pcolor +`</h5>
                                </div>
                                <button onclick="confirmProduct(`+ data[i].oid +`)">确认收货</button>
                            </div></li>`
                        } else if (data[i].situation === "待评价") {
                            noevaluateHtml += `<li class="noevaluat">
                                <div class="list-head">
                                <span>订单号：`+ data[i].oid + `</span>
                                <h4>`+ data[i].pprice + `元</h4>
                            </div>
                            <div class="list-content">
                                <div class = "info">
                                    <img src="./images/`+ data[i].pclass +`/`+ data[i].pname + `.webp" alt="`+ data[i].pname +`">
                                    <h5>`+ data[i].pname + " " + data[i].pversion + " " + data[i].pcolor +`</h5>
                                </div>
                                <button onclick="evaluateOrder(`+ data[i].oid +`)">评价商品</button>
                            </div></li>`
                        } else if (data[i].situation === "已完成") {
                            doneHtml += `<li>
                                <div class="list-head">
                                <span>订单号：`+ data[i].oid + `</span>
                                <h4>`+ data[i].pprice + `元</h4>
                            </div>
                            <div class="list-content">
                                <div class = "info">
                                    <img src="./images/`+ data[i].pclass +`/`+ data[i].pname + `.webp" alt="`+ data[i].pname +`">
                                    <h5>`+ data[i].pname + " " + data[i].pversion + " " + data[i].pcolor +`</h5>
                                </div>
                                <button onclick="deleteOrder(`+ data[i].oid +`)">删除除订单</button>
                            </div></li>`
                        }
                    }
                    if (nopayHtml.length === 0) {
                        nopay.style.display = "none"
                    } else {
                        nopay.style.display = "inline"
                    }
                    if (noreceiveHtml.length === 0) {
                        noreceive.style.display = "none"
                    } else {
                        noreceive.style.display = "inline"
                    }
                    if (noevaluateHtml.length === 0) {
                        noevaluate.style.display = "none"
                    } else {
                        noevaluate.style.display = "inline"
                    }
                    if (doneHtml.length === 0) {
                        done.style.display = "none"
                    } else {
                        done.style.display = "inline"
                    }
                    $("#order-list-nopay").append(nopayHtml)
                    $("#order-list-noreceive").append(noreceiveHtml)
                    $("#order-list-noevaluate").append(noevaluateHtml)
                    $("#order-list-done").append(doneHtml)
                } else {
                    AddMessage("warning", "用户令牌过期")
                    setTimeout(()=>{
                        location.href = "/account#login"
                    }, 500)
                }
            }
        })
    } else {
        AddMessage("error", "未登录")
        setTimeout(()=>{
            location.href = "/account#login"
        }, 500)
    }

    function confirmProduct(oid) {
        $.ajax({
            url:"/api/orderconfirm",
            method:"post",
            data:{
                uid: uid,
                token: token,
                oid: oid
            },
            success(res){
                if(res.code===1001) {
                    AddMessage("success", "确认收货成功")
                    setTimeout(()=>{
                        location.reload()
                    }, 500)
                } else {
                    AddMessage("warning", "用户令牌过期")
                    setTimeout(()=>{
                        location.href = "/account#login"
                    }, 500)
                }
            }
        })
    }

    let oid = -1

    function evaluateOrder(id) {
        oid = id
        $("#evaluate").modal('show') //关闭模态框
    }

    function sendEvaluate() {
        $.ajax({
            url:"/api/orderevaluate",
            method:"post",
            data:{
                uid: uid,
                token: token,
                oid: oid,
                text: document.getElementById("input-evaluate").value
            },
            success(res){
                if(res.code===1001) {
                    AddMessage("success", "评价完成")
                    setTimeout(()=>{
                        location.reload()
                    }, 500)
                } else {
                    AddMessage("warning", "用户令牌过期")
                    setTimeout(()=>{
                        location.href = "/account#login"
                    }, 500)
                }
            }
        })
    }

    function deleteOrder(oid) {
        $.ajax({
            url:"/api/order",
            method:"delete",
            data:{
                uid: uid,
                token: token,
                oid: oid
            },
            success(res){
                if(res.code===1001) {
                    AddMessage("success", "删除订单成功")
                    setTimeout(()=>{
                        location.reload()
                    }, 500)
                } else {
                    AddMessage("warning", "用户令牌过期")
                    setTimeout(()=>{
                        location.href = "/account#login"
                    }, 500)
                }
            }
        }) 
    }
</script>
</html>